<template>
    <div class="admin-page">
        <div class="page-header">
            <!-- 日数据搜索区域 -->
            <div class="search-area">
                <el-date-picker
                    v-model="dailySearchDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    @change="handleDailyDateChange">
                </el-date-picker>
                <el-button @click="fetchAdminList({ date: dailySearchDate })">搜索</el-button>
            </div>
            <div class="chart-wrapper">
                <div id="dailyChart" class="chart"></div>

                <!-- 月数据搜索区域 -->
                <div class="search-area">
                    <el-date-picker
                        v-model="monthlySearchDate"
                        type="month"
                        placeholder="选择月份"
                        value-format="yyyy-MM"
                        @change="handleMonthlyDateChange">
                    </el-date-picker>
                    <el-button @click="getMonth({ month: monthlySearchDate })">搜索</el-button>
                </div>
                <div id="monthlyChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {
            dailyChart: null,
            monthlyChart: null,
            dailyData: null,
            monthlyData: null,
            dailySearchDate: '', // 日搜索日期
            monthlySearchDate: '' // 月搜索日期
        }
    },
    mounted() {
        // 使用当前日期初始化搜索
        const now = new Date();
        this.dailySearchDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
        this.monthlySearchDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;

        this.fetchAdminList({ date: this.dailySearchDate });
        this.getMonth({ month: this.monthlySearchDate });
    },
    beforeDestroy() {
        if (this.dailyChart) {
            this.dailyChart.dispose();
        }
        if (this.monthlyChart) {
            this.monthlyChart.dispose();
        }
    },
    methods: {
        fetchAdminList(params = {}) {
            const mergedParams = {
                date: params.date || this.dailySearchDate, // 使用搜索日期或当前日期
            };
            this.$http.get('/admin/Data/getDayData', { params: mergedParams }).then(result => {
                if (result.code === 200) {
                    this.dailyData = result.data;
                    this.initDailyChart(mergedParams.date); // 传递日期参数
                }
            });
        },
        getMonth(params = {}) {
            const mergedParams = {
                month: params.month || this.monthlySearchDate, // 使用搜索月份或当前月份
            };
            this.$http.get('/admin/Data/getMonthData', { params: mergedParams }).then(result => {
                if (result.code === 200) {
                    this.monthlyData = result.data;
                    this.initMonthlyChart(mergedParams.month); // 传递月份参数
                }
            });
        },
        handleDailyDateChange(date) {
            this.dailySearchDate = date;
        },
        handleMonthlyDateChange(date) {
            this.monthlySearchDate = date;
        },
        initDailyChart(date) {
            if (!this.dailyData) return;

            const chartDom = document.getElementById('dailyChart');
            this.dailyChart = echarts.init(chartDom);

            const option = {
                title: {
                    text: `日数据统计 (${date || '今日'})`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['每日业绩', '新增报单', '新增复购'],
                    top: 30
                },
                xAxis: {
                    type: 'category',
                    data: [date || '今日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '每日业绩',
                        type: 'bar',
                        data: [Number(this.dailyData.total_price) || 0]
                    },
                    {
                        name: '新增报单',
                        type: 'bar',
                        data: [Number(this.dailyData.up_total_price) || 0]
                    },
                    {
                        name: '新增复购',
                        type: 'bar',
                        data: [Number(this.dailyData.repur_total_price) || 0]
                    }
                ]
            };

            this.dailyChart.setOption(option);
        },
        initMonthlyChart(month) {
            if (!this.monthlyData) return;

            const chartDom = document.getElementById('monthlyChart');
            this.monthlyChart = echarts.init(chartDom);

            const option = {
                title: {
                    text: `月累计数据统计 (${month || '本月'})`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}'
                },
                label: {
                    show: true,
                    formatter: '{b}：{c}'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 30
                },
                series: [
                    {
                        name: '累计数据',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: Number(this.monthlyData.total_price) || 0, name: '累计当月业绩' },
                            { value: Number(this.monthlyData.up_total_price) || 0, name: '累计报单业绩' },
                            { value: Number(this.monthlyData.repur_total_price) || 0, name: '累计当月复购业绩' },
                            { value: Number(this.monthlyData.subsidy_to_grain) || 0, name: '累计当月补贴转余粮数据' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.monthlyChart.setOption(option);
        }
    }
}
</script>

<style scoped lang="less">
.admin-page {
    padding: 20px;

    .search-area {
        margin-bottom: 15px;
        display: flex;
        gap: 10px;
    }

    .chart-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .chart {
            height: 400px;
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}
</style>
